/**
 * 智能测肤推荐商品
 * @author Zeon scplay@gmail.com
 * @date 2019/4/12
 * @copyright Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.v-customer-custom-recommend-value-views {
  padding: 20px;
}
</style>
<template>
  <div class="v-customer-custom-recommend-value-views">
    <Tabs type="card" @on-click="changeTab">
      <TabPane :tag_name="tag_name" :label="$t('common.create')" :name="$t('common.create')">
        <create ref="create" :products="products" :hm_positions="hm_positions" @store="store"/>
      </TabPane>

      <TabPane :tag_name="tag_name" :label="$t('common.check')" :name="$t('common.check')">
        <!-- :loading="table_loading" -->
        <index
          :loading="table_loading"
          :hairs="data_list.data"
          :products="products"
          :index_data="index_data"
          @edit="edit"
          @delete="destroy"
        />

        <br>

        <!-- 分页组件 -->
      <Row
					type="flex"
					justify="center">
					<Page
						:total="data_list"
						:current="page_info.page"
						:page-size="page_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"
					/>
				</Row>
      </TabPane>
    </Tabs>

    <Modal
      v-model="show_modal"
      :title="$t('修改产品关联信息')"
      class-name="vertical-middle-modal"
      @on-cancel="hide_Modal"
    >
      <!-- 编辑组件 -->
      <edit
        v-if="show_modal"
        ref="edit"
        :loading="button_loading"
        :edit_data="edit_data"
        :hm_positions="	hm_positions"
        :products="products"
        @update="update"
      />

      <div slot="footer"/>
    </Modal>
  </div>
</template>

<script>
import API_LIST from "src/API_LIST";
import create from "./create";
import edit from "./edit";
import index from "./index";
import qs from "qs";

import { mapMutations, mapGetters } from "vuex";
import { computedFormMaxHeight } from "src/views/mixins/computedFormMaxHeight";

export default {
  name: "CustomRecommendValue",
  components: {
    create,
    edit,
    index
  },
  mixins: [computedFormMaxHeight],

  data() {
    return {
      tag_name: this.$t("expert_suggest.tab_wax"),

      table_loading: false, // 表格更新时的loading


      page_info: {
       // 分页信息
				page: 1,
				per_page: 20,
      },
     index_data_start: 0, // index_data数据slice截取头

			index_data_end: 20, // index——data数据slice截取尾
      data_list:1,

      index_data: [],

      products: [], //商品数据

      hm_positions: [],

      show_modal: false, // 弹框的控制

      button_loading: false, // 按钮的loading

      edit_data: [] // 传入编辑组件的数据
    };
  },

  computed: {},
  watch: {},

  // 获取数据

  created() {
    this.fetchCreate();
  },

  methods: {
    ...mapMutations("spinShow", ["showSpin", "closeSpin"]),

    // 切换 tab
    changeTab(tag) {
      this.tag_name = tag;
      if (tag === "查看") {
        this.index();
      }
    },

    store(form_data) {
      // $http.post(API, form_data)
      if (!form_data.hm_skin.level_sort) {
        alert("请选择程度");
      } else if (form_data.products.length == 0) {
        alert("请选择商品");
      } else {
        this.showSpin(this.$t("common.please_wait"));
        console.log(form_data);
        this.$http
          .post(API_LIST.STORE_RECOMMEND_SINGLE, form_data)
          .then(({ data }) => {
            if (Number(data.code) !== 0) throw new Error(data.error);
            this.$Message.success(this.$t("common.create_success"));

            this.$refs.create.handleReset("formValidate");
            console.log(data);
          })
          .catch(err => {
            this.$Message.error(err.message);
          })
          .then(this.closeSpin);
      }
    },

    // $http.get(API, qs(this.query_info + page_info))
    // this.$http.get(API_LIST.CUST_RECOMMEND_PRODUCT).then((res) => {
    // 	console.log('index_data', res);
    // });

    // 点击编辑按钮
    edit(form_data) {
      // $http.update(API, qs(this.query_info + page_info))

      console.log("edit", form_data);

      this.edit_data = form_data;

      this.show_modal = true;
    },

    // 点击更新按钮
    update(id, form_data) {
      if (form_data.products.length == 0) {
        alert("请选择商品");
      } else {
        this.showSpin();
        this.$http
          .post(`${API_LIST.STORE_RECOMMEND_UPDATE_HM}/${id}`, {
            skin_type: "CustomerRelateHmSkin",
            _method: "PUT",
            product_ids: form_data.products
          })
          .then(({ data }) => {
            if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

            this.$Message.success(this.$t("common.update_success"));

            this.show_modal = false;

            this.index();
            console.log("返回", data);
          })
          .catch(err => {
            this.$Message.error(err.message || err.statusText);
          })
          .then(this.closeSpin);
      }
    },

    // 关闭弹窗
    hide_Modal() {
      this.edit_data = null;
    },

    // 点击删除
    destroy(id) {
      // $http.delete(API, qs(this.query_info + page_info))
      this.$Modal.confirm({
        title: this.$t("product.tip"), // '温馨提示',
        content: this.$t("product.is_delete"), // '删除之后将无法恢复，确定吗？',
        onOk: () => {
          this.table_loading = true;

          this.$http
            .post(`${API_LIST.STORE_RECOMMEND_DEL_HM}/${id}`, {
              skin_type: "CustomerRelateHmSkin",
              _method: "DELETE",
              skin_ids: [id]
            })
            .then(({ data }) => {
              console.log("delete", data);

              this.index();

              this.$Message.success(this.$t("common.delete_success"));
            })

            .catch(err => {
              this.$Message.error(err.message || err.statusText);
            })

            .then(() => {
              this.table_loading = false;
            });
        }
      });
    },

    /**
     * 页码改变
     * @param  {string} pageNumber {当前页码}
     * @return {undefined}
     */
 	pageChange(pageNumber) {
			// slice截取头为页数乘以页面显示条数，若页面为0时，截取头为0
			if (pageNumber != 1) {
				this.index_data_start = (pageNumber - 1) * this.page_info.per_page;
			} else {
				this.index_data_start = 0;
			}

			// slice截取尾为页数乘以页面显示条数
			this.index_data_end = pageNumber * this.page_info.per_page;
			this.page_info.page = pageNumber;
			this.index();
		},

    /**
     * 每页显示数改变
     * @param  {string} per_page {当前每页显示数}
     * @return {undefined}
     */
    perPageChange(per_page) {
     	this.page_info.per_page = per_page;
			this.pageChange(1); // 强制页面跳转到第一个页面
			this.index();
    },

    /**
     *
     */
    // 请求index数据
    index() {
      this.showSpin();
      this.$http
        .get(API_LIST.STORE_RECOMMEND_PRODUCT_INDEX)
        .then(({ data }) => {
          if (data.code !== 0) {
            throw new Error(data.error);
          } else {
            this.data_list = data.hm_skin_relate_recommend_products.length;

          this.index_data = data.hm_skin_relate_recommend_products.slice(this.index_data_start, this.index_data_end);
          }
          this.closeSpin();
        })
        .catch(error => {
          this.$Message.error(error.message);
        });
    },
    fetchCreate() {
      this.showSpin();
      // 请求create数据
      this.$http
        .get(API_LIST.STORE_RECOMMEND_WAX_CREATE)
        .then(({ data }) => {
          if (data.code !== 0) {
            throw new Error(data.error);
          } else {
            this.products = data.products;
            this.hm_positions = data.hm_skin_suggests;
            this.closeSpin();
            console.log("creat", this.hm_positions);
          }
        })
        .catch(error => {
          this.$Message.error(error.message);
        });
    }
  }
};
</script>
